<template>
  <div class="mainid">
    <!-- 主目录 -->
    <div class="colid1">
      <!-- 在这里放置主目录的内容 -->
      <div v-for="index in 5" :key="index">
        <!-- 这里放置你想要循环生成的内容 -->
        <p>这是第 {{ index }} 个项目</p>
      </div>
    </div>

    <!-- 主体和副目录区域 -->
    <div class="content">
      <!-- 主体区域，可滚动 -->

      <div class="main-content">
        <!-- 在这里放置主体内容 -->
        <div v-for="index in 5" :key="index">
          <!-- 这里放置你想要循环生成的内容 -->
          <p>这是第 {{ index }} 个项目</p>
        </div>
      </div>

      <!-- 副目录，固定悬浮在主体区域旁边 -->
      <div class="colid2">
        <!-- 在这里放置副目录的内容 -->
        <div v-for="index in 5" :key="index">
          <!-- 这里放置你想要循环生成的内容 -->
          <p>这是第 {{ index }} 个项目</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FirstView"
}
</script>

<style scoped>
.mainid {
  display: flex;
  height: 100%;
  width: 100vw;
}

.colid1 {
  background-color: #00bb29;
  flex: 0 0 auto; /* 主目录固定宽度 */
  padding: 20px;
  overflow: auto; /* 如果内容超出高度，显示滚动条 */
  min-width: 200px; /* 设置主目录的最小宽度 */
}

.content {
  flex: 1; /* 主体和副目录区域会占满剩余空间 */
  display: flex;
}

.main-content {
  flex: 1;
  overflow-y: auto; /* 主体内容区域可滚动 */
  padding: 20px;
}

.colid2 {
  background-color: #03d764;
  flex: 0 0 auto; /* 副目录固定宽度 */
  padding: 20px;
  min-width: 200px; /* 设置副目录的最小宽度 */
}

</style>